
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>css · Aivin开发笔记</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Aivin">
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-local-video/video-js.min.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-theme-comscore/test.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../../styles/website.css">
        
    

        
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="JSX.html" />
    
    
    <link rel="prev" href="js.html" />
    

    
        <link rel="shortcut icon" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
        <link rel="bookmark" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    个人信息
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="友情链接.html">
            
                <a href="友情链接.html">
            
                    
                    友情链接
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="js.html">
            
                <a href="js.html">
            
                    
                    web前端
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="html5.html">
            
                <a href="html5.html">
            
                    
                    html5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="js.html">
            
                <a href="js.html">
            
                    
                    js
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.3" data-path="css.html">
            
                <a href="css.html">
            
                    
                    css
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="JSX.html">
            
                <a href="JSX.html">
            
                    
                    JSX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="CommonJS.html">
            
                <a href="CommonJS.html">
            
                    
                    CommonJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ES6.html">
            
                <a href="ES6.html">
            
                    
                    ES6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="mockjs.html">
            
                <a href="mockjs.html">
            
                    
                    mockjs
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="ESLint.html">
            
                <a href="ESLint.html">
            
                    
                    ESLint
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="alias.html">
            
                <a href="alias.html">
            
                    
                    alias
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.10" data-path="vueJS.html">
            
                <a href="vueJS.html">
            
                    
                    vueJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.11" data-path="Vuex.html">
            
                <a href="Vuex.html">
            
                    
                    Vuex
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.12" data-path="vue-router.html">
            
                <a href="vue-router.html">
            
                    
                    vue-router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.13" data-path="vue-i18n.html">
            
                <a href="vue-i18n.html">
            
                    
                    vue-i18n
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.14" data-path="element.html">
            
                <a href="element.html">
            
                    
                    element
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.15" data-path="iview.html">
            
                <a href="iview.html">
            
                    
                    iview
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.16" data-path="test.html">
            
                <a href="test.html">
            
                    
                    test
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >css</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#css"><b>1. </b>css</a></li><ul><li><span class="title-icon "></span><a href="#&#x5F15;&#x5165;css&#x6837;&#x5F0F;"><b>1.1. </b>&#x5F15;&#x5165;css&#x6837;&#x5F0F;</a></li><ul><li><span class="title-icon "></span><a href="#css-&#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;"><b>1.1.1. </b>css &#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;</a></li></ul><li><span class="title-icon "></span><a href="#css-&#x9009;&#x62E9;&#x5668;"><b>1.2. </b>css &#x9009;&#x62E9;&#x5668;</a></li><ul><li><span class="title-icon "></span><a href="#&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;"><b>1.2.1. </b>&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#&#x5143;&#x7D20;&#x5206;&#x7EC4;-&#x9009;&#x62E9;&#x5668;"><b>1.2.2. </b>&#x5143;&#x7D20;&#x5206;&#x7EC4; &#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#&#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;"><b>1.2.3. </b>&#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#id-&#x9009;&#x62E9;&#x5668;--&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><b>1.2.4. </b>id &#x9009;&#x62E9;&#x5668;  ,&#x7528; # &#x6765;&#x5B9A;&#x4E49;</a></li><li><span class="title-icon "></span><a href="#&#x7C7B;&#x9009;&#x62E9;&#x5668;----&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><b>1.2.5. </b>&#x7C7B;&#x9009;&#x62E9;&#x5668;  ,  &#x7528; . &#x6765;&#x5B9A;&#x4E49;</a></li><li><span class="title-icon "></span><a href="#&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;"><b>1.2.6. </b>&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#css-&#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;"><b>1.2.7. </b>css &#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;</a></li></ul><li><span class="title-icon "></span><a href="#css-&#x5B9A;&#x4F4D;&#x76F8;&#x5173;"><b>1.3. </b>css &#x5B9A;&#x4F4D;&#x76F8;&#x5173;</a></li><li><span class="title-icon "></span><a href="#css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;"><b>1.4. </b>css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;</a></li><li><span class="title-icon "></span><a href="#css-&#x5C3A;&#x5BF8;&#x76F8;&#x5173;"><b>1.5. </b>css &#x5C3A;&#x5BF8;&#x76F8;&#x5173;</a></li><li><span class="title-icon "></span><a href="#css-&#x52A8;&#x753B;&#x5C5E;&#x6027;"><b>1.6. </b>css &#x52A8;&#x753B;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x80CC;&#x666F;&#x5C5E;&#x6027;"><b>1.7. </b>css &#x80CC;&#x666F;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css---&#x8FB9;&#x6846;&#x5C5E;&#x6027;"><b>1.8. </b>css   &#x8FB9;&#x6846;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-box-&#x5C5E;&#x6027;"><b>1.9. </b>css Box &#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x989C;&#x8272;-&#x5C5E;&#x6027;"><b>1.10. </b>css &#x989C;&#x8272; &#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-content-for-paged-media-&#x5C5E;&#x6027;"><b>1.11. </b>css Content for Paged Media &#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x5C3A;&#x5BF8;&#x5C5E;&#x6027;"><b>1.12. </b>css &#x5C3A;&#x5BF8;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;flexible-box&#xFF09;"><b>1.13. </b>css &#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;Flexible Box&#xFF09;</a></li><li><span class="title-icon "></span><a href="#css-&#x5B57;&#x4F53;&#x5C5E;&#x6027;"><b>1.14. </b>css &#x5B57;&#x4F53;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x5185;&#x5BB9;&#x751F;&#x6210;-&#x76F8;&#x5173;&#x5C5E;&#x6027;"><b>1.15. </b>css &#x5185;&#x5BB9;&#x751F;&#x6210; &#x76F8;&#x5173;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x8868;&#x683C;&#x5C5E;&#x6027;"><b>1.16. </b>css &#x8868;&#x683C;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;"><b>1.17. </b>css &#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x5217;&#x8868;&#x5C5E;&#x6027;"><b>1.18. </b>css &#x5217;&#x8868;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><b>1.19. </b>css &#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;"><b>1.20. </b>css &#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x591A;&#x5217;&#x5C5E;&#x6027;"><b>1.21. </b>css &#x591A;&#x5217;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><b>1.22. </b>css &#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-paged-media-&#x5C5E;&#x6027;"><b>1.23. </b>css Paged Media &#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x6253;&#x5370;&#x5C5E;&#x6027;"><b>1.24. </b>css &#x6253;&#x5370;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x8868;&#x683C;&#x5C5E;&#x6027;_1"><b>1.25. </b>css &#x8868;&#x683C;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css--&#x6587;&#x672C;&#x5C5E;&#x6027;"><b>1.26. </b>css  &#x6587;&#x672C;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-2d3d-&#x8F6C;&#x6362;&#x5C5E;&#x6027;"><b>1.27. </b>css 2D/3D &#x8F6C;&#x6362;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x8FC7;&#x6E21;&#x5C5E;&#x6027;"><b>1.28. </b>css &#x8FC7;&#x6E21;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;"><b>1.29. </b>css &#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#css-&#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;"><b>1.30. </b>css &#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;</a></li></ul></ul></div><a href="#css" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="css"><a name="css" class="anchor-navigation-ex-anchor" href="#css"><i class="fa fa-link" aria-hidden="true"></i></a>1. css</h1>
<p><a href="https://www.runoob.com/cssref/css-reference.html" target="_blank">cssref</a></p>
<h2 id="&#x5F15;&#x5165;css&#x6837;&#x5F0F;"><a name="&#x5F15;&#x5165;css&#x6837;&#x5F0F;" class="anchor-navigation-ex-anchor" href="#&#x5F15;&#x5165;css&#x6837;&#x5F0F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1. &#x5F15;&#x5165;css&#x6837;&#x5F0F;</h2>
<pre><code class="lang-xml">&#x5916;&#x90E8;&#x6837;&#x5F0F;&#x8868;
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;mystyle.css&quot;</span> /&gt;</span>

&#x5185;&#x90E8;&#x6837;&#x5F0F;&#x8868;
<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css">
  <span class="hljs-selector-tag">hr</span> {<span class="hljs-attribute">color</span>: sienna;}
  ...
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>


&#x5185;&#x8054;&#x6837;&#x5F0F;
&#x5185;&#x8054;&#x6837;&#x5F0F;&#x4F1A;&#x635F;&#x5931;&#x6389;&#x6837;&#x5F0F;&#x8868;&#x7684;&#x8BB8;&#x591A;&#x4F18;&#x52BF;&#x3002;&#x8BF7;&#x614E;&#x7528;&#x3002;
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: sienna; margin-left: 20px&quot;</span>&gt;</span>
This is a paragraph
<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</code></pre>
<h3 id="css-&#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;"><a name="css-&#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;" class="anchor-navigation-ex-anchor" href="#css-&#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.1. css &#x4F7F;&#x7528;&#x7684;&#x4F18;&#x5148;&#x7EA7;</h3>
<pre><code class="lang-css">&#x540C;&#x4E00;&#x5143;&#x7D20;&#x540C;&#x65F6;&#x4F7F;&#x7528;Style,ID,Class&#x6765;&#x6307;&#x5B9A;&#x6837;&#x5F0F;.
style &gt; id &gt; class

&#x5982;&#x679C;&#x662F;&#x4E0D;&#x540C;&#x5143;&#x7D20;,&#x8FD8;&#x9700;&#x8981;&#x770B;&#x5143;&#x7D20;&#x7236;&#x5C42;&#x7EA7;&#x7684;&#x6837;&#x5F0F;:
1.&#x5B50;&#x5143;&#x7D20;&#x81EA;&#x8EAB;&#x6709;&#x6837;&#x5F0F;,&#x4EE5;&#x81EA;&#x8EAB;&#x7684;&#x4E3A;&#x51C6;.
2.&#x5B50;&#x5143;&#x7D20;&#x672A;&#x8BBE;&#x5B9A;&#x6837;&#x5F0F;,&#x6B64;&#x65F6;&#x5982;&#x679C;&#x7236;&#x5143;&#x7D20;&#x6709;&#x5B9A;&#x4E49;&#x7684;&#x8BDD;&#x5957;&#x7528;&#x7236;&#x5143;&#x7D20;&#x7684;&#x6837;&#x5F0F;&#x5426;&#x5219;&#x4EE5;&#x9ED8;&#x8BA4;&#x663E;&#x793A;
 &lt;div class=&quot;login-container&quot; style=&quot;background-color: #141a48; &quot;&gt;
</code></pre>
<h2 id="css-&#x9009;&#x62E9;&#x5668;"><a name="css-&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#css-&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2. css &#x9009;&#x62E9;&#x5668;</h2>
<h3 id="&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;"><a name="&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.1. &#x5355;&#x4E2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">body {
  // &#x989C;&#x8272;&#x58F0;&#x660E;
  color: #000;
  // &#x80CC;&#x666F;&#x58F0;&#x660E;
  background: #fff;
  }
</code></pre>
<h3 id="&#x5143;&#x7D20;&#x5206;&#x7EC4;-&#x9009;&#x62E9;&#x5668;"><a name="&#x5143;&#x7D20;&#x5206;&#x7EC4;-&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x5143;&#x7D20;&#x5206;&#x7EC4;-&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.2. &#x5143;&#x7D20;&#x5206;&#x7EC4; &#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">h1,h2,h3,h4,h5,h6 {
  color: green;
  }
</code></pre>
<h3 id="&#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;"><a name="&#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.3. &#x6D3E;&#x751F;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">&#x5E38;&#x4E0E;id&#x9009;&#x62E9;&#x5668;&#x3001;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x4E00;&#x8D77;&#x4F7F;&#x7528;&#xFF0C;&#x53EF;&#x4EE5;&#x66F4;&#x65B9;&#x4FBF;&#x5730;&#x5B9A;&#x4E49;&#x5C40;&#x90E8;&#x7684;css.
&#x91CD;&#x65B0;&#x5B9A;&#x4E49;id&#x4E3A;sidebar&#x4E0B;&#x7684; strong&#x5C5E;&#x6027;
sidebar strong {
    font-style: italic;
    font-weight: normal;
  }
</code></pre>
<h3 id="id-&#x9009;&#x62E9;&#x5668;--&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><a name="id-&#x9009;&#x62E9;&#x5668;--&#x7528;--&#x6765;&#x5B9A;&#x4E49;" class="anchor-navigation-ex-anchor" href="#id-&#x9009;&#x62E9;&#x5668;--&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.4. id &#x9009;&#x62E9;&#x5668;  ,&#x7528; # &#x6765;&#x5B9A;&#x4E49;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sidebar&quot;</span>&gt;</span> ..... <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
</code></pre>
<h3 id="&#x7C7B;&#x9009;&#x62E9;&#x5668;----&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><a name="&#x7C7B;&#x9009;&#x62E9;&#x5668;----&#x7528;--&#x6765;&#x5B9A;&#x4E49;" class="anchor-navigation-ex-anchor" href="#&#x7C7B;&#x9009;&#x62E9;&#x5668;----&#x7528;--&#x6765;&#x5B9A;&#x4E49;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.5. &#x7C7B;&#x9009;&#x62E9;&#x5668;  ,  &#x7528; . &#x6765;&#x5B9A;&#x4E49;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>
.center {
  text-align: center ;
}
</code></pre>
<h3 id="&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;"><a name="&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.6. &#x5C5E;&#x6027;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">[title]
{
color:red;
}
[&#x5C5E;&#x6027;]          //&#x7528;&#x4E8E;&#x9009;&#x53D6;&#x5E26;&#x6709;&#x6307;&#x5B9A;&#x5C5E;&#x6027;&#x7684;&#x5143;&#x7D20;&#x3002;
[&#x5C5E;&#x6027;=value]    //&#x7528;&#x4E8E;&#x9009;&#x53D6;&#x5E26;&#x6709;&#x6307;&#x5B9A;&#x5C5E;&#x6027;&#x548C;&#x503C;&#x7684;&#x5143;&#x7D20;&#x3002;
[&#x5C5E;&#x6027;~=value]    //&#x7528;&#x4E8E;&#x9009;&#x53D6;&#x5C5E;&#x6027;&#x503C;&#x4E2D;&#x5305;&#x542B;&#x6307;&#x5B9A;&#x8BCD;&#x6C47;&#x7684;&#x5143;&#x7D20;&#x3002;
[&#x5C5E;&#x6027;|=value] //&#x7528;&#x4E8E;&#x9009;&#x53D6;&#x5E26;&#x6709;&#x4EE5;&#x6307;&#x5B9A;&#x503C;&#x5F00;&#x5934;&#x7684;&#x5C5E;&#x6027;&#x503C;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x8BE5;&#x503C;&#x5FC5;&#x987B;&#x662F;&#x6574;&#x4E2A;&#x5355;&#x8BCD;&#x3002;
[&#x5C5E;&#x6027;^=value]    //&#x5339;&#x914D;&#x5C5E;&#x6027;&#x503C;&#x4EE5;&#x6307;&#x5B9A;&#x503C;&#x5F00;&#x5934;&#x7684;&#x6BCF;&#x4E2A;&#x5143;&#x7D20;&#x3002;
[&#x5C5E;&#x6027;$=value]    //&#x5339;&#x914D;&#x5C5E;&#x6027;&#x503C;&#x4EE5;&#x6307;&#x5B9A;&#x503C;&#x7ED3;&#x5C3E;&#x7684;&#x6BCF;&#x4E2A;&#x5143;&#x7D20;&#x3002;
[&#x5C5E;&#x6027;*=value]    //&#x5339;&#x914D;&#x5C5E;&#x6027;&#x503C;&#x4E2D;&#x5305;&#x542B;&#x6307;&#x5B9A;&#x503C;&#x7684;&#x6BCF;&#x4E2A;&#x5143;&#x7D20;&#x3002;
</code></pre>
<h3 id="css-&#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;"><a name="css-&#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#css-&#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2.7. css &#x5176;&#x4ED6;&#x5E38;&#x7528;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">&#x9009;&#x62E9;&#x6240;&#x6709;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5B83;&#x4EEC;&#x7684;&#x80CC;&#x666F;&#x8272;&#xFF1A;
*
{
 background-color:yellow;
}

&#x9009;&#x62E9;&#x672A;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5176;&#x6837;&#x5F0F;&#xFF1A;
a:link
{
  background-color:yellow;
}

&#x9009;&#x62E9;&#x5DF2;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5176;&#x6837;&#x5F0F;&#xFF1A;
a:visited
{
background-color:yellow;
}

&#x9009;&#x62E9;&#x6D3B;&#x52A8;&#x94FE;&#x63A5;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5176;&#x6837;&#x5F0F;&#xFF1A;
a:active
{
background-color:yellow;
}

&#x9009;&#x62E9;&#x9F20;&#x6807;&#x6307;&#x9488;&#x6D6E;&#x52A8;&#x5728;&#x5176;&#x4E0A;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5176;&#x6837;&#x5F0F;&#xFF1A;
a:hover
{
background-color:yellow;
}

&#x9009;&#x62E9;&#x83B7;&#x5F97;&#x7126;&#x70B9;&#x7684;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#xFF0C;&#x5E76;&#x8BBE;&#x7F6E;&#x5176;&#x6837;&#x5F0F;&#xFF1A;
input:focus
{
background-color:yellow;
}

&#x4E3A;&#x6240;&#x6709; type=&quot;text&quot; &#x7684;&#x5DF2;&#x542F;&#x7528;&#x7684; input &#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x8272;&#xFF1A;
input[type=&quot;text&quot;]:enabled
{
background-color: #ff0000;
}

&#x4E3A;&#x6240;&#x6709; type=&quot;text&quot; &#x7684;&#x88AB;&#x7981;&#x7528;&#x7684; input &#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x8272;&#xFF1A;
input[type=&quot;text&quot;]:disabled
{
background-color: #dddddd;
}

&#x4E3A;&#x6240;&#x6709;&#x88AB;&#x9009;&#x4E2D;&#x7684; input &#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x8272;&#xFF1A;
input:checked
{
background-color: #ff0000;
}
</code></pre>
<h2 id="css-&#x5B9A;&#x4F4D;&#x76F8;&#x5173;"><a name="css-&#x5B9A;&#x4F4D;&#x76F8;&#x5173;" class="anchor-navigation-ex-anchor" href="#css-&#x5B9A;&#x4F4D;&#x76F8;&#x5173;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3. css &#x5B9A;&#x4F4D;&#x76F8;&#x5173;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>//&#x5143;&#x7D20;&#x6846;&#x6B63;&#x5E38;&#x751F;&#x6210;&#x3002;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x77E9;&#x5F62;&#x6846;&#xFF0C;&#x4F5C;&#x4E3A;&#x6587;&#x6863;&#x6D41;&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x884C;&#x5185;&#x5143;&#x7D20;&#x5219;&#x4F1A;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x884C;&#x6846;&#xFF0C;&#x7F6E;&#x4E8E;&#x5176;&#x7236;&#x5143;&#x7D20;&#x4E2D;&#x3002; <br> static <br><br>//&#x5143;&#x7D20;&#x6846;&#x504F;&#x79FB;&#x67D0;&#x4E2A;&#x8DDD;&#x79BB;&#x3002;&#x5143;&#x7D20;&#x4ECD;&#x4FDD;&#x6301;&#x5176;&#x672A;&#x5B9A;&#x4F4D;&#x524D;&#x7684;&#x5F62;&#x72B6;&#xFF0C;&#x5B83;&#x539F;&#x672C;&#x6240;&#x5360;&#x7684;&#x7A7A;&#x95F4;&#x4ECD;&#x4FDD;&#x7559;&#x3002; <br> relative <br>  <br> //&#x5143;&#x7D20;&#x6846;&#x4ECE;&#x6587;&#x6863;&#x6D41;&#x5B8C;&#x5168;&#x5220;&#x9664;&#xFF0C;&#x5E76;&#x76F8;&#x5BF9;&#x4E8E;&#x5176;&#x5305;&#x542B;&#x5757;&#x5B9A;&#x4F4D;&#x3002;&#x5305;&#x542B;&#x5757;&#x53EF;&#x80FD;&#x662F;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x53E6;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x6216;&#x8005;&#x662F;&#x521D;&#x59CB;&#x5305;&#x542B;&#x5757;&#x3002;&#x5143;&#x7D20;&#x539F;&#x5148;&#x5728;&#x6B63;&#x5E38;&#x6587;&#x6863;&#x6D41;&#x4E2D;&#x6240;&#x5360;&#x7684;&#x7A7A;&#x95F4;&#x4F1A;&#x5173;&#x95ED;&#xFF0C;&#x5C31;&#x597D;&#x50CF;&#x5143;&#x7D20;&#x539F;&#x6765;&#x4E0D;&#x5B58;&#x5728;&#x4E00;&#x6837;&#x3002;&#x5143;&#x7D20;&#x5B9A;&#x4F4D;&#x540E;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x5757;&#x7EA7;&#x6846;&#xFF0C;&#x800C;&#x4E0D;&#x8BBA;&#x539F;&#x6765;&#x5B83;&#x5728;&#x6B63;&#x5E38;&#x6D41;&#x4E2D;&#x751F;&#x6210;&#x4F55;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x6846;&#x3002; <br> absolute <br>  <br> //&#x5143;&#x7D20;&#x6846;&#x7684;&#x8868;&#x73B0;&#x7C7B;&#x4F3C;&#x4E8E;&#x5C06; position &#x8BBE;&#x7F6E;&#x4E3A; absolute&#xFF0C;&#x4E0D;&#x8FC7;&#x5176;&#x5305;&#x542B;&#x5757;&#x662F;&#x89C6;&#x7A97;&#x672C;&#x8EAB;&#x3002; <br> fixed</td>
</tr>
<tr>
<td>top</td>
<td>&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x5916;&#x8FB9;&#x8DDD;&#x8FB9;&#x754C;&#x4E0E;&#x5176;&#x5305;&#x542B;&#x5757;&#x4E0A;&#x8FB9;&#x754C;&#x4E4B;&#x95F4;&#x7684;&#x504F;&#x79FB;&#x3002;</td>
</tr>
<tr>
<td>right</td>
<td>&#x5B9A;&#x4E49;&#x4E86;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x53F3;&#x5916;&#x8FB9;&#x8DDD;&#x8FB9;&#x754C;&#x4E0E;&#x5176;&#x5305;&#x542B;&#x5757;&#x53F3;&#x8FB9;&#x754C;&#x4E4B;&#x95F4;&#x7684;&#x504F;&#x79FB;&#x3002;</td>
</tr>
<tr>
<td>bottom</td>
<td>&#x5B9A;&#x4E49;&#x4E86;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x4E0B;&#x5916;&#x8FB9;&#x8DDD;&#x8FB9;&#x754C;&#x4E0E;&#x5176;&#x5305;&#x542B;&#x5757;&#x4E0B;&#x8FB9;&#x754C;&#x4E4B;&#x95F4;&#x7684;&#x504F;&#x79FB;&#x3002;</td>
</tr>
<tr>
<td>left</td>
<td>&#x5B9A;&#x4E49;&#x4E86;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x5DE6;&#x5916;&#x8FB9;&#x8DDD;&#x8FB9;&#x754C;&#x4E0E;&#x5176;&#x5305;&#x542B;&#x5757;&#x5DE6;&#x8FB9;&#x754C;&#x4E4B;&#x95F4;&#x7684;&#x504F;&#x79FB;&#x3002;</td>
</tr>
<tr>
<td>overflow</td>
<td>&#x8BBE;&#x7F6E;&#x5F53;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x6EA2;&#x51FA;&#x5176;&#x533A;&#x57DF;&#x65F6;&#x53D1;&#x751F;&#x7684;&#x4E8B;&#x60C5;&#x3002;</td>
</tr>
<tr>
<td>clip</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5F62;&#x72B6;&#x3002;&#x5143;&#x7D20;&#x88AB;&#x526A;&#x5165;&#x8FD9;&#x4E2A;&#x5F62;&#x72B6;&#x4E4B;&#x4E2D;&#xFF0C;&#x7136;&#x540E;&#x663E;&#x793A;&#x51FA;&#x6765;&#x3002;</td>
</tr>
<tr>
<td>vertical-align</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5782;&#x76F4;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>z-index</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5806;&#x53E0;&#x987A;&#x5E8F;</td>
</tr>
<tr>
<td>clear</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x7684;&#x54EA;&#x4E00;&#x4FA7;&#x4E0D;&#x5141;&#x8BB8;&#x5176;&#x4ED6;&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x3002;</td>
</tr>
<tr>
<td>cursor</td>
<td>&#x89C4;&#x5B9A;&#x8981;&#x663E;&#x793A;&#x7684;&#x5149;&#x6807;&#x7684;&#x7C7B;&#x578B;&#xFF08;&#x5F62;&#x72B6;&#xFF09;&#x3002;</td>
</tr>
<tr>
<td>display</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x5E94;&#x8BE5;&#x751F;&#x6210;&#x7684;&#x6846;&#x7684;&#x7C7B;&#x578B;&#x3002;</td>
</tr>
<tr>
<td>float</td>
<td>&#x89C4;&#x5B9A;&#x6846;&#x662F;&#x5426;&#x5E94;&#x8BE5;&#x6D6E;&#x52A8;&#x3002;</td>
</tr>
<tr>
<td>visibility</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x662F;&#x5426;&#x53EF;&#x89C1;</td>
</tr>
</tbody>
</table>
<h2 id="css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;"><a name="css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;" class="anchor-navigation-ex-anchor" href="#css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;"><i class="fa fa-link" aria-hidden="true"></i></a>1.4. css&#x8FB9;&#x8DDD;&#x76F8;&#x5173;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>border</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x9488;&#x5BF9;&#x56DB;&#x4E2A;&#x8FB9;&#x7684;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x3002;</td>
</tr>
<tr>
<td>border-style</td>
<td>&#x7528;&#x4E8E;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x6240;&#x6709;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#xFF0C;&#x6216;&#x8005;&#x5355;&#x72EC;&#x5730;&#x4E3A;&#x5404;&#x8FB9;&#x8BBE;&#x7F6E;&#x8FB9;&#x6846;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>border-width</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x4E3A;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x8FB9;&#x6846;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#xFF0C;&#x6216;&#x8005;&#x5355;&#x72EC;&#x5730;&#x4E3A;&#x5404;&#x8FB9;&#x8FB9;&#x6846;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-color</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x8FB9;&#x6846;&#x4E2D;&#x53EF;&#x89C1;&#x90E8;&#x5206;&#x7684;&#x989C;&#x8272;&#xFF0C;&#x6216;&#x4E3A; 4 &#x4E2A;&#x8FB9;&#x5206;&#x522B;&#x8BBE;&#x7F6E;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-bottom</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x5230;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x3002;</td>
</tr>
<tr>
<td>border-bottom-color</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-bottom-style</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>border-bottom-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-left</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x5230;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x3002;</td>
</tr>
<tr>
<td>border-left-color</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-left-style</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>border-left-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-right</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x5230;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x3002;</td>
</tr>
<tr>
<td>border-right-color</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-right-style</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>border-right-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-top</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x5230;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x3002;</td>
</tr>
<tr>
<td>border-top-color</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-top-style</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>border-top-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5C3A;&#x5BF8;&#x76F8;&#x5173;"><a name="css-&#x5C3A;&#x5BF8;&#x76F8;&#x5173;" class="anchor-navigation-ex-anchor" href="#css-&#x5C3A;&#x5BF8;&#x76F8;&#x5173;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5. css &#x5C3A;&#x5BF8;&#x76F8;&#x5173;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>line-height</td>
<td>&#x8BBE;&#x7F6E;&#x884C;&#x9AD8;</td>
</tr>
<tr>
<td>min-height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5C0F;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>max-height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5927;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>max-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5927;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>min-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5C0F;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x52A8;&#x753B;&#x5C5E;&#x6027;"><a name="css-&#x52A8;&#x753B;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x52A8;&#x753B;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.6. css &#x52A8;&#x753B;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>@keyframes</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x3002;     </td>
</tr>
<tr>
<td>animation</td>
<td>&#x6240;&#x6709;&#x52A8;&#x753B;&#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x9664;&#x4E86; animation-play-state &#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>animation-name</td>
<td>&#x89C4;&#x5B9A; @keyframes &#x52A8;&#x753B;&#x7684;&#x540D;&#x79F0;&#x3002;</td>
</tr>
<tr>
<td>animation-duration</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x5B8C;&#x6210;&#x4E00;&#x4E2A;&#x5468;&#x671F;&#x6240;&#x82B1;&#x8D39;&#x7684;&#x79D2;&#x6216;&#x6BEB;&#x79D2;&#x3002;     </td>
</tr>
<tr>
<td>animation-timing-function</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x7684;&#x901F;&#x5EA6;&#x66F2;&#x7EBF;&#x3002;</td>
</tr>
<tr>
<td>animation-delay</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x4F55;&#x65F6;&#x5F00;&#x59CB;&#x3002;</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x88AB;&#x64AD;&#x653E;&#x7684;&#x6B21;&#x6570;&#x3002;     </td>
</tr>
<tr>
<td>animation-direction</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x662F;&#x5426;&#x5728;&#x4E0B;&#x4E00;&#x5468;&#x671F;&#x9006;&#x5411;&#x5730;&#x64AD;&#x653E;&#x3002;     </td>
</tr>
<tr>
<td>animation-play-state</td>
<td>&#x89C4;&#x5B9A;&#x52A8;&#x753B;&#x662F;&#x5426;&#x6B63;&#x5728;&#x8FD0;&#x884C;&#x6216;&#x6682;&#x505C;&#x3002;</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>&#x89C4;&#x5B9A;&#x5BF9;&#x8C61;&#x52A8;&#x753B;&#x65F6;&#x95F4;&#x4E4B;&#x5916;&#x7684;&#x72B6;&#x6001;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x80CC;&#x666F;&#x5C5E;&#x6027;"><a name="css-&#x80CC;&#x666F;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x80CC;&#x666F;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.7. css &#x80CC;&#x666F;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>background</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x80CC;&#x666F;&#x5C5E;&#x6027;      </td>
</tr>
<tr>
<td>background-attachment</td>
<td>&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x662F;&#x5426;&#x56FA;&#x5B9A;&#x6216;&#x8005;&#x968F;&#x7740;&#x9875;&#x9762;&#x7684;&#x5176;&#x4F59;&#x90E8;&#x5206;&#x6EDA;&#x52A8;&#x3002;scroll&#x3001;fixed&#x3001;inherit</td>
</tr>
<tr>
<td>background-color</td>
<td>&#x53EF;&#x4EE5;&#x4E3A;&#x6240;&#x6709;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x80CC;&#x666F;</td>
</tr>
<tr>
<td>background-image</td>
<td>&#x80CC;&#x666F;&#x56FE;&#x50CF; &#xFF0C; url(/i/eg_bg_03.gif)</td>
</tr>
<tr>
<td>background-position</td>
<td>&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x7684;&#x5F00;&#x59CB;&#x4F4D;&#x3002;center,top,bottom,right,left&#x3001;&#x767E;&#x5206;&#x6BD4;&#x3001;&#x5177;&#x4F53;&#x7684;px</td>
</tr>
<tr>
<td>background-repeat</td>
<td>&#x80CC;&#x666F;&#x91CD;&#x590D; &#xFF0C; repeat &#x3001; repeat-x &#x3001; repeat-y&#x3001; no-repeat &#x3001;inherit</td>
</tr>
<tr>
<td>background-clip</td>
<td>&#x89C4;&#x5B9A;&#x80CC;&#x666F;&#x7684;&#x7ED8;&#x5236;&#x533A;&#x57DF;&#x3002;</td>
</tr>
<tr>
<td>background-origin</td>
<td>&#x89C4;&#x5B9A;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x7684;&#x5B9A;&#x4F4D;&#x533A;&#x57DF;&#x3002;     </td>
</tr>
<tr>
<td>background-size</td>
<td>&#x89C4;&#x5B9A;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x7684;&#x5C3A;&#x5BF8;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css---&#x8FB9;&#x6846;&#x5C5E;&#x6027;"><a name="css---&#x8FB9;&#x6846;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css---&#x8FB9;&#x6846;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.8. css   &#x8FB9;&#x6846;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>border</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x8FB9;&#x6846;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>border-bottom</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x4E0B;&#x8FB9;&#x6846;&#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>border-bottom-color</td>
<td>&#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;     </td>
</tr>
<tr>
<td>border-bottom-style</td>
<td>&#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;     </td>
</tr>
<tr>
<td>border-bottom-width</td>
<td>&#x8BBE;&#x7F6E;&#x4E0B;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-color</td>
<td>&#x8BBE;&#x7F6E;&#x56DB;&#x6761;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-left</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x5DE6;&#x8FB9;&#x6846;&#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>border-left-color</td>
<td>&#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;     </td>
</tr>
<tr>
<td>border-left-style</td>
<td>&#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;     </td>
</tr>
<tr>
<td>border-left-width</td>
<td>&#x8BBE;&#x7F6E;&#x5DE6;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;     </td>
</tr>
<tr>
<td>border-right</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x53F3;&#x8FB9;&#x6846;&#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>border-right-color</td>
<td>&#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>border-right-style</td>
<td>&#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;     </td>
</tr>
<tr>
<td>border-right-width</td>
<td>&#x8BBE;&#x7F6E;&#x53F3;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;     </td>
</tr>
<tr>
<td>border-style</td>
<td>&#x8BBE;&#x7F6E;&#x56DB;&#x6761;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;     </td>
</tr>
<tr>
<td>border-top</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x4E0A;&#x8FB9;&#x6846;&#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>border-top-color</td>
<td>&#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x989C;&#x8272;&#x3002;     </td>
</tr>
<tr>
<td>border-top-style</td>
<td>&#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;     </td>
</tr>
<tr>
<td>border-top-width</td>
<td>&#x8BBE;&#x7F6E;&#x4E0A;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-width</td>
<td>&#x8BBE;&#x7F6E;&#x56DB;&#x6761;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;     </td>
</tr>
<tr>
<td>outline</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x7684;&#x8F6E;&#x5ED3;&#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>outline-color</td>
<td>&#x8BBE;&#x7F6E;&#x8F6E;&#x5ED3;&#x7684;&#x989C;&#x8272;&#x3002;     </td>
</tr>
<tr>
<td>outline-style</td>
<td>&#x8BBE;&#x7F6E;&#x8F6E;&#x5ED3;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>outline-width</td>
<td>&#x8BBE;&#x7F6E;&#x8F6E;&#x5ED3;&#x7684;&#x5BBD;&#x5EA6;&#x3002;     </td>
</tr>
<tr>
<td>border-bottom-left-radius</td>
<td>&#x5B9A;&#x4E49;&#x8FB9;&#x6846;&#x5DE6;&#x4E0B;&#x89D2;&#x7684;&#x5F62;&#x72B6;&#x3002;     </td>
</tr>
<tr>
<td>border-bottom-right-radius</td>
<td>&#x5B9A;&#x4E49;&#x8FB9;&#x6846;&#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x5F62;&#x72B6;&#x3002;     </td>
</tr>
<tr>
<td>border-image</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x8BBE;&#x7F6E;&#x6240;&#x6709; border-image-* &#x5C5E;&#x6027;&#x3002;     </td>
</tr>
<tr>
<td>border-image-outset</td>
<td>&#x89C4;&#x5B9A;&#x8FB9;&#x6846;&#x56FE;&#x50CF;&#x533A;&#x57DF;&#x8D85;&#x51FA;&#x8FB9;&#x6846;&#x7684;&#x91CF;&#x3002;</td>
</tr>
<tr>
<td>border-image-repeat</td>
<td>&#x56FE;&#x50CF;&#x8FB9;&#x6846;&#x662F;&#x5426;&#x5E94;&#x5E73;&#x94FA;(repeated)&#x3001;&#x94FA;&#x6EE1;(rounded)&#x6216;&#x62C9;&#x4F38;(stretched)&#x3002;     </td>
</tr>
<tr>
<td>border-image-slice</td>
<td>&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x8FB9;&#x6846;&#x7684;&#x5411;&#x5185;&#x504F;&#x79FB;&#x3002;</td>
</tr>
<tr>
<td>border-image-source</td>
<td>&#x89C4;&#x5B9A;&#x7528;&#x4F5C;&#x8FB9;&#x6846;&#x7684;&#x56FE;&#x7247;&#x3002;</td>
</tr>
<tr>
<td>border-image-width</td>
<td>&#x89C4;&#x5B9A;&#x56FE;&#x7247;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>border-radius</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x56DB;&#x4E2A; border-*-radius &#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>border-top-left-radius</td>
<td>&#x5B9A;&#x4E49;&#x8FB9;&#x6846;&#x5DE6;&#x4E0A;&#x89D2;&#x7684;&#x5F62;&#x72B6;&#x3002;</td>
</tr>
<tr>
<td>border-top-right-radius</td>
<td>&#x5B9A;&#x4E49;&#x8FB9;&#x6846;&#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x5F62;&#x72B6;&#x3002;</td>
</tr>
<tr>
<td>box-decoration-break</td>
<td></td>
</tr>
<tr>
<td>box-shadow</td>
<td>&#x5411;&#x65B9;&#x6846;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x9634;&#x5F71;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-box-&#x5C5E;&#x6027;"><a name="css-box-&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-box-&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.9. css Box &#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>overflow-x</td>
<td>&#x5982;&#x679C;&#x5185;&#x5BB9;&#x6EA2;&#x51FA;&#x4E86;&#x5143;&#x7D20;&#x5185;&#x5BB9;&#x533A;&#x57DF;&#xFF0C;&#x662F;&#x5426;&#x5BF9;&#x5185;&#x5BB9;&#x7684;&#x5DE6;/&#x53F3;&#x8FB9;&#x7F18;&#x8FDB;&#x884C;&#x88C1;&#x526A;&#x3002;</td>
</tr>
<tr>
<td>overflow-y</td>
<td>&#x5982;&#x679C;&#x5185;&#x5BB9;&#x6EA2;&#x51FA;&#x4E86;&#x5143;&#x7D20;&#x5185;&#x5BB9;&#x533A;&#x57DF;&#xFF0C;&#x662F;&#x5426;&#x5BF9;&#x5185;&#x5BB9;&#x7684;&#x4E0A;/&#x4E0B;&#x8FB9;&#x7F18;&#x8FDB;&#x884C;&#x88C1;&#x526A;&#x3002;</td>
</tr>
<tr>
<td>overflow-style</td>
<td>&#x89C4;&#x5B9A;&#x6EA2;&#x51FA;&#x5143;&#x7D20;&#x7684;&#x9996;&#x9009;&#x6EDA;&#x52A8;&#x65B9;&#x6CD5;&#x3002;</td>
</tr>
<tr>
<td>rotation</td>
<td>&#x56F4;&#x7ED5;&#x7531; rotation-point &#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x7684;&#x70B9;&#x5BF9;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x65CB;&#x8F6C;&#x3002;</td>
</tr>
<tr>
<td>rotation-point</td>
<td>&#x5B9A;&#x4E49;&#x8DDD;&#x79BB;&#x4E0A;&#x5DE6;&#x8FB9;&#x6846;&#x8FB9;&#x7F18;&#x7684;&#x504F;&#x79FB;&#x70B9;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x989C;&#x8272;-&#x5C5E;&#x6027;"><a name="css-&#x989C;&#x8272;-&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x989C;&#x8272;-&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.10. css &#x989C;&#x8272; &#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>color-profile</td>
<td>&#x5141;&#x8BB8;&#x4F7F;&#x7528;&#x6E90;&#x7684;&#x989C;&#x8272;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x7684;&#x9ED8;&#x8BA4;&#x4EE5;&#x5916;&#x7684;&#x89C4;&#x8303;&#x3002;</td>
</tr>
<tr>
<td>opacity</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x7684;&#x4E0D;&#x900F;&#x660E;&#x7EA7;&#x522B;&#x3002;</td>
</tr>
<tr>
<td>rendering-intent</td>
<td>&#x5141;&#x8BB8;&#x4F7F;&#x7528;&#x989C;&#x8272;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x6E32;&#x67D3;&#x610F;&#x56FE;&#x7684;&#x9ED8;&#x8BA4;&#x4EE5;&#x5916;&#x7684;&#x89C4;&#x8303;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-content-for-paged-media-&#x5C5E;&#x6027;"><a name="css-content-for-paged-media-&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-content-for-paged-media-&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.11. css Content for Paged Media &#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>bookmark-label</td>
<td>&#x89C4;&#x5B9A;&#x4E66;&#x7B7E;&#x7684;&#x6807;&#x8BB0;&#x3002;</td>
</tr>
<tr>
<td>bookmark-level</td>
<td>&#x89C4;&#x5B9A;&#x4E66;&#x7B7E;&#x7684;&#x7EA7;&#x522B;&#x3002;</td>
</tr>
<tr>
<td>bookmark-target</td>
<td>&#x89C4;&#x5B9A;&#x4E66;&#x7B7E;&#x94FE;&#x63A5;&#x7684;&#x76EE;&#x6807;&#x3002;</td>
</tr>
<tr>
<td>float-offset</td>
<td>&#x5C06;&#x5143;&#x7D20;&#x653E;&#x5728; float &#x5C5E;&#x6027;&#x901A;&#x5E38;&#x653E;&#x7F6E;&#x7684;&#x4F4D;&#x7F6E;&#x7684;&#x76F8;&#x53CD;&#x65B9;&#x5411;&#x3002;</td>
</tr>
<tr>
<td>hyphenate-after</td>
<td>&#x89C4;&#x5B9A;&#x8FDE;&#x5B57;&#x5355;&#x8BCD;&#x4E2D;&#x8FDE;&#x5B57;&#x7B26;&#x4E4B;&#x540E;&#x7684;&#x6700;&#x5C0F;&#x5B57;&#x7B26;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>hyphenate-before</td>
<td>&#x89C4;&#x5B9A;&#x8FDE;&#x5B57;&#x5355;&#x8BCD;&#x4E2D;&#x8FDE;&#x5B57;&#x7B26;&#x4E4B;&#x524D;&#x7684;&#x6700;&#x5C0F;&#x5B57;&#x7B26;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>hyphenate-character</td>
<td>&#x89C4;&#x5B9A;&#x5F53;&#x53D1;&#x751F;&#x65AD;&#x5B57;&#x65F6;&#x663E;&#x793A;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x3002;</td>
</tr>
<tr>
<td>hyphenate-lines</td>
<td>&#x6307;&#x793A;&#x5143;&#x7D20;&#x4E2D;&#x8FDE;&#x7EED;&#x65AD;&#x5B57;&#x8FDE;&#x7EBF;&#x7684;&#x6700;&#x5927;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>hyphenate-resource</td>
<td>&#x89C4;&#x5B9A;&#x5E2E;&#x52A9;&#x6D4F;&#x89C8;&#x5668;&#x786E;&#x5B9A;&#x65AD;&#x5B57;&#x70B9;&#x7684;&#x5916;&#x90E8;&#x8D44;&#x6E90;&#xFF08;&#x9017;&#x53F7;&#x5206;&#x9694;&#x7684;&#x5217;&#x8868;&#xFF09;&#x3002;</td>
</tr>
<tr>
<td>hyphens</td>
<td>&#x8BBE;&#x7F6E;&#x5982;&#x4F55;&#x5BF9;&#x5355;&#x8BCD;&#x8FDB;&#x884C;&#x62C6;&#x5206;&#xFF0C;&#x4EE5;&#x6539;&#x5584;&#x6BB5;&#x843D;&#x7684;&#x5E03;&#x5C40;&#x3002;</td>
</tr>
<tr>
<td>image-resolution</td>
<td>&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x7684;&#x6B63;&#x786E;&#x5206;&#x8FA8;&#x7387;&#x3002;</td>
</tr>
<tr>
<td>marks</td>
<td>&#x5411;&#x6587;&#x6863;&#x6DFB;&#x52A0;&#x88C1;&#x5207;&#x6807;&#x8BB0;&#x6216;&#x5341;&#x5B57;&#x6807;&#x8BB0;&#x3002;</td>
</tr>
<tr>
<td>string-set</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5C3A;&#x5BF8;&#x5C5E;&#x6027;"><a name="css-&#x5C3A;&#x5BF8;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5C3A;&#x5BF8;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.12. css &#x5C3A;&#x5BF8;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>max-height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5927;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>max-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5927;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>min-height</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5C0F;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>min-width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6700;&#x5C0F;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>width</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;flexible-box&#xFF09;"><a name="css-&#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;flexible-box&#xFF09;" class="anchor-navigation-ex-anchor" href="#css-&#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;flexible-box&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a>1.13. css &#x53EF;&#x4F38;&#x7F29;&#x6846;&#x5C5E;&#x6027;&#xFF08;Flexible Box&#xFF09;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>box-align</td>
<td>&#x89C4;&#x5B9A;&#x5982;&#x4F55;&#x5BF9;&#x9F50;&#x6846;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x3002;</td>
</tr>
<tr>
<td>box-direction</td>
<td>&#x89C4;&#x5B9A;&#x6846;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x663E;&#x793A;&#x65B9;&#x5411;&#x3002;</td>
</tr>
<tr>
<td>box-flex</td>
<td>&#x89C4;&#x5B9A;&#x6846;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x662F;&#x5426;&#x53EF;&#x4F38;&#x7F29;&#x3002;</td>
</tr>
<tr>
<td>box-flex-group</td>
<td>&#x5C06;&#x53EF;&#x4F38;&#x7F29;&#x5143;&#x7D20;&#x5206;&#x914D;&#x5230;&#x67D4;&#x6027;&#x5206;&#x7EC4;&#x3002;</td>
</tr>
<tr>
<td>box-lines</td>
<td>&#x89C4;&#x5B9A;&#x5F53;&#x8D85;&#x51FA;&#x7236;&#x5143;&#x7D20;&#x6846;&#x7684;&#x7A7A;&#x95F4;&#x65F6;&#xFF0C;&#x662F;&#x5426;&#x6362;&#x884C;&#x663E;&#x793A;&#x3002;</td>
</tr>
<tr>
<td>box-ordinal-group</td>
<td>&#x89C4;&#x5B9A;&#x6846;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x663E;&#x793A;&#x6B21;&#x5E8F;&#x3002;</td>
</tr>
<tr>
<td>box-orient</td>
<td>&#x89C4;&#x5B9A;&#x6846;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x662F;&#x5426;&#x5E94;&#x6C34;&#x5E73;&#x6216;&#x5782;&#x76F4;&#x6392;&#x5217;&#x3002;</td>
</tr>
<tr>
<td>box-pack</td>
<td>&#x89C4;&#x5B9A;&#x6C34;&#x5E73;&#x6846;&#x4E2D;&#x7684;&#x6C34;&#x5E73;&#x4F4D;&#x7F6E;&#x6216;&#x8005;&#x5782;&#x76F4;&#x6846;&#x4E2D;&#x7684;&#x5782;&#x76F4;&#x4F4D;&#x7F6E;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5B57;&#x4F53;&#x5C5E;&#x6027;"><a name="css-&#x5B57;&#x4F53;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5B57;&#x4F53;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.14. css &#x5B57;&#x4F53;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>font</td>
<td>&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x5B57;&#x4F53;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>font-family</td>
<td>&#x6587;&#x672C;&#x7684;&#x5B57;&#x4F53;</td>
</tr>
<tr>
<td>font-size</td>
<td>&#x89C4;&#x5B9A;&#x6587;&#x672C;&#x7684;&#x5B57;&#x4F53;&#x5C3A;&#x5BF8;</td>
</tr>
<tr>
<td>font-size-adjust</td>
<td>&#x4E3A;&#x5143;&#x7D20;&#x89C4;&#x5B9A; aspect &#x503C;&#x3002;</td>
</tr>
<tr>
<td>font-stretch</td>
<td>&#x6536;&#x7F29;&#x6216;&#x62C9;&#x4F38;&#x5F53;&#x524D;&#x7684;&#x5B57;&#x4F53;&#x7CFB;&#x5217;&#x3002;</td>
</tr>
<tr>
<td>font-style</td>
<td>&#x89C4;&#x5B9A;&#x6587;&#x672C;&#x7684;&#x5B57;&#x4F53;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>font-variant</td>
<td>&#x89C4;&#x5B9A;&#x662F;&#x5426;&#x4EE5;&#x5C0F;&#x578B;&#x5927;&#x5199;&#x5B57;&#x6BCD;&#x7684;&#x5B57;&#x4F53;&#x663E;&#x793A;&#x6587;&#x672C;&#x3002;</td>
</tr>
<tr>
<td>font-weight</td>
<td>&#x89C4;&#x5B9A;&#x5B57;&#x4F53;&#x7684;&#x7C97;&#x7EC6;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5185;&#x5BB9;&#x751F;&#x6210;-&#x76F8;&#x5173;&#x5C5E;&#x6027;"><a name="css-&#x5185;&#x5BB9;&#x751F;&#x6210;-&#x76F8;&#x5173;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5185;&#x5BB9;&#x751F;&#x6210;-&#x76F8;&#x5173;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.15. css &#x5185;&#x5BB9;&#x751F;&#x6210; &#x76F8;&#x5173;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>&#x4E0E; :before &#x4EE5;&#x53CA; :after &#x4F2A;&#x5143;&#x7D20;&#x914D;&#x5408;&#x4F7F;&#x7528;&#xFF0C;&#x6765;&#x63D2;&#x5165;&#x751F;&#x6210;&#x5185;&#x5BB9;&#x3002;</td>
</tr>
<tr>
<td>counter-increment</td>
<td>&#x9012;&#x589E;&#x6216;&#x9012;&#x51CF;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x8BA1;&#x6570;&#x5668;&#x3002;</td>
</tr>
<tr>
<td>counter-reset</td>
<td>&#x521B;&#x5EFA;&#x6216;&#x91CD;&#x7F6E;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x8BA1;&#x6570;&#x5668;&#x3002;</td>
</tr>
<tr>
<td>quotes</td>
<td>&#x8BBE;&#x7F6E;&#x5D4C;&#x5957;&#x5F15;&#x7528;&#x7684;&#x5F15;&#x53F7;&#x7C7B;&#x578B;&#x3002;</td>
</tr>
<tr>
<td>crop</td>
<td>&#x5141;&#x8BB8;&#x88AB;&#x66FF;&#x6362;&#x5143;&#x7D20;&#x4EC5;&#x4EC5;&#x662F;&#x5BF9;&#x8C61;&#x7684;&#x77E9;&#x5F62;&#x533A;&#x57DF;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x6574;&#x4E2A;&#x5BF9;&#x8C61;&#x3002;</td>
</tr>
<tr>
<td>move-to</td>
<td>&#x4ECE;&#x6D41;&#x4E2D;&#x5220;&#x9664;&#x5143;&#x7D20;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x6587;&#x6863;&#x4E2D;&#x540E;&#x9762;&#x7684;&#x70B9;&#x4E0A;&#x91CD;&#x65B0;&#x63D2;&#x5165;&#x3002;</td>
</tr>
<tr>
<td>page-policy</td>
<td>&#x786E;&#x5B9A;&#x5143;&#x7D20;&#x57FA;&#x4E8E;&#x9875;&#x9762;&#x7684; occurrence &#x5E94;&#x7528;&#x4E8E;&#x8BA1;&#x6570;&#x5668;&#x8FD8;&#x662F;&#x5B57;&#x7B26;&#x4E32;&#x503C;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x8868;&#x683C;&#x5C5E;&#x6027;"><a name="css-&#x8868;&#x683C;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x8868;&#x683C;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.16. css &#x8868;&#x683C;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>grid-columns</td>
<td>&#x89C4;&#x5B9A;&#x7F51;&#x683C;&#x4E2D;&#x6BCF;&#x4E2A;&#x5217;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>grid-rows</td>
<td>&#x89C4;&#x5B9A;&#x7F51;&#x683C;&#x4E2D;&#x6BCF;&#x4E2A;&#x5217;&#x7684;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;"><a name="css-&#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.17. css &#x8D85;&#x94FE;&#x63A5;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x8BBE;&#x7F6E;target-name&#x3001;target-new&#x4EE5;&#x53CA;target-position&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>target-name</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F55;&#x5904;&#x6253;&#x5F00;&#x94FE;&#x63A5;&#xFF08;&#x94FE;&#x63A5;&#x7684;&#x76EE;&#x6807;&#xFF09;&#x3002;</td>
</tr>
<tr>
<td>target-new</td>
<td>&#x89C4;&#x5B9A;&#x76EE;&#x6807;&#x94FE;&#x63A5;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x8FD8;&#x662F;&#x5728;&#x5DF2;&#x6709;&#x7A97;&#x53E3;&#x7684;&#x65B0;&#x6807;&#x7B7E;&#x9875;&#x4E2D;&#x6253;&#x5F00;&#x3002;</td>
</tr>
<tr>
<td>target-position</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F55;&#x5904;&#x653E;&#x7F6E;&#x65B0;&#x7684;&#x76EE;&#x6807;&#x94FE;&#x63A5;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5217;&#x8868;&#x5C5E;&#x6027;"><a name="css-&#x5217;&#x8868;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5217;&#x8868;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.18. css &#x5217;&#x8868;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>list-style</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#x3002;&#x7528;&#x4E8E;&#x628A;&#x6240;&#x6709;&#x7528;&#x4E8E;&#x5217;&#x8868;&#x7684;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E8E;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;</td>
</tr>
<tr>
<td>list-style-image</td>
<td>&#x5C06;&#x56FE;&#x8C61;&#x8BBE;&#x7F6E;&#x4E3A;&#x5217;&#x8868;&#x9879;&#x6807;&#x5FD7;</td>
</tr>
<tr>
<td>list-style-position</td>
<td>&#x8BBE;&#x7F6E;&#x5217;&#x8868;&#x4E2D;&#x5217;&#x8868;&#x9879;&#x6807;&#x5FD7;&#x7684;&#x4F4D;&#x7F6E;</td>
</tr>
<tr>
<td>list-style-type</td>
<td>&#x8BBE;&#x7F6E;&#x5217;&#x8868;&#x9879;&#x6807;&#x5FD7;&#x7684;&#x7C7B;&#x578B;</td>
</tr>
<tr>
<td>marker-offset</td>
<td>&#x8BBE;&#x7F6E;&#x6216;&#x68C0;&#x7D22;&#x6807;&#x8BB0;&#x5BB9;&#x5668;&#x548C;&#x4E3B;&#x5BB9;&#x5668;&#x4E4B;&#x95F4;&#x6C34;&#x5E73;&#x8865;&#x767D;&#x3002;&#x5373;&#x4E24;&#x4E2A;&#x5BB9;&#x5668;&#x9760;&#x8FD1;&#x7684;&#x4E00;&#x8FB9;&#x7684;&#x95F4;&#x8DDD;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><a name="css-&#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.19. css &#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>margin</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#x3002;&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x6240;&#x6709;&#x5916;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>margin-bottom</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x5916;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>margin-left</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x5916;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>margin-right</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x53F3;&#x5916;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>margin-top</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x5916;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;"><a name="css-&#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.20. css &#x8D70;&#x9A6C;&#x706F;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>marquee-direction</td>
<td>&#x8BBE;&#x7F6E;&#x79FB;&#x52A8;&#x5185;&#x5BB9;&#x7684;&#x65B9;&#x5411;&#x3002;</td>
</tr>
<tr>
<td>marquee-play-count</td>
<td>&#x8BBE;&#x7F6E;&#x5185;&#x5BB9;&#x79FB;&#x52A8;&#x591A;&#x5C11;&#x6B21;&#x3002;</td>
</tr>
<tr>
<td>marquee-speed</td>
<td>&#x8BBE;&#x7F6E;&#x5185;&#x5BB9;&#x6EDA;&#x52A8;&#x5F97;&#x591A;&#x5FEB;&#x3002;</td>
</tr>
<tr>
<td>marquee-style</td>
<td>&#x8BBE;&#x7F6E;&#x79FB;&#x52A8;&#x5185;&#x5BB9;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x591A;&#x5217;&#x5C5E;&#x6027;"><a name="css-&#x591A;&#x5217;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x591A;&#x5217;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.21. css &#x591A;&#x5217;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>column-count</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x5E94;&#x8BE5;&#x88AB;&#x5206;&#x9694;&#x7684;&#x5217;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>column-fill</td>
<td>&#x89C4;&#x5B9A;&#x5982;&#x4F55;&#x586B;&#x5145;&#x5217;&#x3002;</td>
</tr>
<tr>
<td>column-gap</td>
<td>&#x89C4;&#x5B9A;&#x5217;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#x3002;</td>
</tr>
<tr>
<td>column-rule</td>
<td>&#x8BBE;&#x7F6E;&#x6240;&#x6709; column-rule-* &#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5199;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>column-rule-color</td>
<td>&#x89C4;&#x5B9A;&#x5217;&#x4E4B;&#x95F4;&#x89C4;&#x5219;&#x7684;&#x989C;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>column-rule-style</td>
<td>&#x89C4;&#x5B9A;&#x5217;&#x4E4B;&#x95F4;&#x89C4;&#x5219;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>column-rule-width</td>
<td>&#x89C4;&#x5B9A;&#x5217;&#x4E4B;&#x95F4;&#x89C4;&#x5219;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>column-span</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x5E94;&#x8BE5;&#x6A2A;&#x8DE8;&#x7684;&#x5217;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>column-width</td>
<td>&#x89C4;&#x5B9A;&#x5217;&#x7684;&#x5BBD;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>columns</td>
<td>&#x89C4;&#x5B9A;&#x8BBE;&#x7F6E; column-width &#x548C; column-count &#x7684;&#x7B80;&#x5199;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><a name="css-&#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.22. css &#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>padding</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#x3002;&#x4F5C;&#x7528;&#x662F;&#x5728;&#x4E00;&#x4E2A;&#x58F0;&#x660E;&#x4E2D;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x6240;&#x5185;&#x8FB9;&#x8DDD;&#x5C5E;&#x6027;&#x3002;&#x4E0A;&#x3001;&#x53F3;&#x3001;&#x4E0B;&#x3001;&#x5DE6;</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x5185;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>padding-left</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x5DE6;&#x5185;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>padding-right</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x53F3;&#x5185;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
<tr>
<td>padding-top</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x5185;&#x8FB9;&#x8DDD;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-paged-media-&#x5C5E;&#x6027;"><a name="css-paged-media-&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-paged-media-&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.23. css Paged Media &#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>fit</td>
<td>&#x793A;&#x610F;&#x5982;&#x4F55;&#x5BF9;width&#x548C;height&#x5C5E;&#x6027;&#x5747;&#x4E0D;&#x662F;auto&#x7684;&#x88AB;&#x66FF;&#x6362;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x7F29;&#x653E;&#x3002;</td>
</tr>
<tr>
<td>fit-position</td>
<td>&#x5B9A;&#x4E49;&#x76D2;&#x5185;&#x5BF9;&#x8C61;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>image-orientation</td>
<td>&#x89C4;&#x5B9A;&#x7528;&#x6237;&#x4EE3;&#x7406;&#x5E94;&#x7528;&#x4E8E;&#x56FE;&#x50CF;&#x7684;&#x987A;&#x65F6;&#x9488;&#x65B9;&#x5411;&#x65CB;&#x8F6C;&#x3002;</td>
</tr>
<tr>
<td>page</td>
<td>&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x5E94;&#x8BE5;&#x88AB;&#x663E;&#x793A;&#x7684;&#x9875;&#x9762;&#x7279;&#x5B9A;&#x7C7B;&#x578B;&#x3002;</td>
</tr>
<tr>
<td>size</td>
<td>&#x89C4;&#x5B9A;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x5305;&#x542B;&#x6846;&#x7684;&#x5C3A;&#x5BF8;&#x548C;&#x65B9;&#x5411;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x6253;&#x5370;&#x5C5E;&#x6027;"><a name="css-&#x6253;&#x5370;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x6253;&#x5370;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.24. css &#x6253;&#x5370;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>orphans</td>
<td>&#x8BBE;&#x7F6E;&#x5F53;&#x5143;&#x7D20;&#x5185;&#x90E8;&#x53D1;&#x751F;&#x5206;&#x9875;&#x65F6;&#x5FC5;&#x987B;&#x5728;&#x9875;&#x9762;&#x5E95;&#x90E8;&#x4FDD;&#x7559;&#x7684;&#x6700;&#x5C11;&#x884C;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>page-break-after</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x540E;&#x7684;&#x5206;&#x9875;&#x884C;&#x4E3A;&#x3002;</td>
</tr>
<tr>
<td>page-break-before</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x524D;&#x7684;&#x5206;&#x9875;&#x884C;&#x4E3A;&#x3002;</td>
</tr>
<tr>
<td>page-break-inside</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x5185;&#x90E8;&#x7684;&#x5206;&#x9875;&#x884C;&#x4E3A;&#x3002;</td>
</tr>
<tr>
<td>widows</td>
<td>&#x8BBE;&#x7F6E;&#x5F53;&#x5143;&#x7D20;&#x5185;&#x90E8;&#x53D1;&#x751F;&#x5206;&#x9875;&#x65F6;&#x5FC5;&#x987B;&#x5728;&#x9875;&#x9762;&#x9876;&#x90E8;&#x4FDD;&#x7559;&#x7684;&#x6700;&#x5C11;&#x884C;&#x6570;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x8868;&#x683C;&#x5C5E;&#x6027;_1"><a name="css-&#x8868;&#x683C;&#x5C5E;&#x6027;_1" class="anchor-navigation-ex-anchor" href="#css-&#x8868;&#x683C;&#x5C5E;&#x6027;_1"><i class="fa fa-link" aria-hidden="true"></i></a>1.25. css &#x8868;&#x683C;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>border-collapse</td>
<td>&#x8BBE;&#x7F6E;&#x662F;&#x5426;&#x628A;&#x8868;&#x683C;&#x8FB9;&#x6846;&#x5408;&#x5E76;&#x4E3A;&#x5355;&#x4E00;&#x7684;&#x8FB9;&#x6846;</td>
</tr>
<tr>
<td>border-spacing</td>
<td>&#x8BBE;&#x7F6E;&#x5206;&#x9694;&#x5355;&#x5143;&#x683C;&#x8FB9;&#x6846;&#x7684;&#x8DDD;&#x79BB;</td>
</tr>
<tr>
<td>caption-side</td>
<td>&#x8BBE;&#x7F6E;&#x8868;&#x683C;&#x6807;&#x9898;&#x7684;&#x4F4D;&#x7F6E;</td>
</tr>
<tr>
<td>empty-cells</td>
<td>&#x8BBE;&#x7F6E;&#x662F;&#x5426;&#x663E;&#x793A;&#x8868;&#x683C;&#x4E2D;&#x7684;&#x7A7A;&#x5355;&#x5143;&#x683C;</td>
</tr>
<tr>
<td>table-layout</td>
<td>&#x8BBE;&#x7F6E;&#x663E;&#x793A;&#x5355;&#x5143;&#x3001;&#x884C;&#x548C;&#x5217;&#x7684;&#x7B97;&#x6CD5;</td>
</tr>
</tbody>
</table>
<h2 id="css--&#x6587;&#x672C;&#x5C5E;&#x6027;"><a name="css--&#x6587;&#x672C;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css--&#x6587;&#x672C;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.26. css  &#x6587;&#x672C;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>&#x6587;&#x672C;&#x989C;&#x8272;</td>
</tr>
<tr>
<td>direction</td>
<td>&#x6587;&#x672C;&#x65B9;&#x5411;</td>
</tr>
<tr>
<td>unicode-bidi</td>
<td>&#x5BF9;&#x4E8E;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF0C;&#x53EA;&#x6709;&#x5F53; unicode-bidi &#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A; embed &#x6216; bidi-override &#x65F6;&#x624D;&#x4F1A;&#x5E94;&#x7528; direction &#x5C5E;&#x6027;</td>
</tr>
<tr>
<td>line-height</td>
<td>&#x6587;&#x672C;&#x884C;&#x9AD8;</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>&#x4E0E; word-spacing &#x7684;&#x533A;&#x522B;&#x5728;&#x4E8E;&#xFF0C;&#x5B57;&#x6BCD;&#x95F4;&#x9694;&#x4FEE;&#x6539;&#x7684;&#x662F;&#x5B57;&#x7B26;&#x6216;&#x5B57;&#x6BCD;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;</td>
</tr>
<tr>
<td>word-spacing</td>
<td>&#x5B57;&#xFF08;&#x5355;&#x8BCD;&#xFF09;&#x4E4B;&#x95F4;&#x7684;&#x6807;&#x51C6;&#x95F4;&#x9694;</td>
</tr>
<tr>
<td>text-align</td>
<td>&#x5BF9;&#x9F50;&#x5143;&#x7D20;&#x4E2D;&#x7684;&#x6587;&#x672C;</td>
</tr>
<tr>
<td>text-decoration</td>
<td>&#x5411;&#x6587;&#x672C;&#x6DFB;&#x52A0;&#x4E0B;&#x5212;&#x7EBF;&#x3001;&#x5220;&#x9664;&#x7EBF;&#x7B49;</td>
</tr>
<tr>
<td>text-indent</td>
<td>&#x6587;&#x672C;&#x7F29;&#x8FDB;</td>
</tr>
<tr>
<td>text-shadow</td>
<td>&#x8BBE;&#x7F6E;&#x6587;&#x672C;&#x9634;&#x5F71;</td>
</tr>
<tr>
<td>text-transform</td>
<td>&#x5904;&#x7406;&#x6587;&#x672C;&#x7684;&#x5927;&#x5C0F;&#x5199;</td>
</tr>
<tr>
<td>white-space</td>
<td>&#x5904;&#x7406;&#x7A7A;&#x767D;&#x7B26;</td>
</tr>
<tr>
<td>hanging-punctuation</td>
<td>&#x89C4;&#x5B9A;&#x6807;&#x70B9;&#x5B57;&#x7B26;&#x662F;&#x5426;&#x4F4D;&#x4E8E;&#x7EBF;&#x6846;&#x4E4B;&#x5916;</td>
</tr>
<tr>
<td>punctuation-trim</td>
<td>&#x89C4;&#x5B9A;&#x662F;&#x5426;&#x5BF9;&#x6807;&#x70B9;&#x5B57;&#x7B26;&#x8FDB;&#x884C;&#x4FEE;&#x526A;&#x3002;</td>
</tr>
<tr>
<td>text-align-last</td>
<td>&#x8BBE;&#x7F6E;&#x5982;&#x4F55;&#x5BF9;&#x9F50;&#x6700;&#x540E;&#x4E00;&#x884C;&#x6216;&#x7D27;&#x6328;&#x7740;&#x5F3A;&#x5236;&#x6362;&#x884C;&#x7B26;&#x4E4B;&#x524D;&#x7684;&#x884C;&#x3002;</td>
</tr>
<tr>
<td>text-emphasis</td>
<td>&#x5411;&#x5143;&#x7D20;&#x7684;&#x6587;&#x672C;&#x5E94;&#x7528;&#x91CD;&#x70B9;&#x6807;&#x8BB0;&#x4EE5;&#x53CA;&#x91CD;&#x70B9;&#x6807;&#x8BB0;&#x7684;&#x524D;&#x666F;&#x8272;&#x3002;</td>
</tr>
<tr>
<td>text-justify</td>
<td>&#x89C4;&#x5B9A;&#x5F53; text-align &#x8BBE;&#x7F6E;&#x4E3A; &quot;justify&quot; &#x65F6;&#x6240;&#x4F7F;&#x7528;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x6CD5;&#x3002;</td>
</tr>
<tr>
<td>text-outline</td>
<td>&#x89C4;&#x5B9A;&#x6587;&#x672C;&#x7684;&#x8F6E;&#x5ED3;&#x3002;    </td>
</tr>
<tr>
<td>text-overflow</td>
<td>&#x89C4;&#x5B9A;&#x5F53;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5305;&#x542B;&#x5143;&#x7D20;&#x65F6;&#x53D1;&#x751F;&#x7684;&#x4E8B;&#x60C5;&#x3002;  </td>
</tr>
<tr>
<td>text-wrap</td>
<td>&#x89C4;&#x5B9A;&#x6587;&#x672C;&#x7684;&#x6362;&#x884C;&#x89C4;&#x5219;&#x3002;  </td>
</tr>
<tr>
<td>word-break</td>
<td>&#x89C4;&#x5B9A;&#x975E;&#x4E2D;&#x65E5;&#x97E9;&#x6587;&#x672C;&#x7684;&#x6362;&#x884C;&#x89C4;&#x5219;&#x3002;  </td>
</tr>
<tr>
<td>word-wrap</td>
<td>&#x5141;&#x8BB8;&#x5BF9;&#x957F;&#x7684;&#x4E0D;&#x53EF;&#x5206;&#x5272;&#x7684;&#x5355;&#x8BCD;&#x8FDB;&#x884C;&#x5206;&#x5272;&#x5E76;&#x6362;&#x884C;&#x5230;&#x4E0B;&#x4E00;&#x884C;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-2d3d-&#x8F6C;&#x6362;&#x5C5E;&#x6027;"><a name="css-2d3d-&#x8F6C;&#x6362;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-2d3d-&#x8F6C;&#x6362;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.27. css 2D/3D &#x8F6C;&#x6362;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>transform</td>
<td>&#x5411;&#x5143;&#x7D20;&#x5E94;&#x7528; 2D &#x6216; 3D &#x8F6C;&#x6362;&#x3002;</td>
</tr>
<tr>
<td>transform-origin</td>
<td>&#x5141;&#x8BB8;&#x4F60;&#x6539;&#x53D8;&#x88AB;&#x8F6C;&#x6362;&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#x3002;</td>
</tr>
<tr>
<td>transform-style</td>
<td>&#x89C4;&#x5B9A;&#x88AB;&#x5D4C;&#x5957;&#x5143;&#x7D20;&#x5982;&#x4F55;&#x5728; 3D &#x7A7A;&#x95F4;&#x4E2D;&#x663E;&#x793A;&#x3002;</td>
</tr>
<tr>
<td>perspective</td>
<td>&#x89C4;&#x5B9A; 3D &#x5143;&#x7D20;&#x7684;&#x900F;&#x89C6;&#x6548;&#x679C;&#x3002;</td>
</tr>
<tr>
<td>perspective-origin</td>
<td>&#x89C4;&#x5B9A; 3D &#x5143;&#x7D20;&#x7684;&#x5E95;&#x90E8;&#x4F4D;&#x7F6E;&#x3002;</td>
</tr>
<tr>
<td>backface-visibility</td>
<td>&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x5728;&#x4E0D;&#x9762;&#x5BF9;&#x5C4F;&#x5E55;&#x65F6;&#x662F;&#x5426;&#x53EF;&#x89C1;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x8FC7;&#x6E21;&#x5C5E;&#x6027;"><a name="css-&#x8FC7;&#x6E21;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x8FC7;&#x6E21;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.28. css &#x8FC7;&#x6E21;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>transition</td>
<td>&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x5728;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x4E2D;&#x8BBE;&#x7F6E;&#x56DB;&#x4E2A;&#x8FC7;&#x6E21;&#x5C5E;&#x6027;&#x3002;</td>
</tr>
<tr>
<td>transition-property</td>
<td>&#x89C4;&#x5B9A;&#x5E94;&#x7528;&#x8FC7;&#x6E21;&#x7684; CSS &#x5C5E;&#x6027;&#x7684;&#x540D;&#x79F0;&#x3002;</td>
</tr>
<tr>
<td>transition-duration</td>
<td>&#x5B9A;&#x4E49;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x82B1;&#x8D39;&#x7684;&#x65F6;&#x95F4;&#x3002;</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>&#x89C4;&#x5B9A;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x7684;&#x65F6;&#x95F4;&#x66F2;&#x7EBF;&#x3002;</td>
</tr>
<tr>
<td>transition-delay</td>
<td>&#x89C4;&#x5B9A;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x4F55;&#x65F6;&#x5F00;&#x59CB;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;"><a name="css-&#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.29. css &#x7528;&#x6237;&#x754C;&#x9762;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x5173;&#x952E;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>appearance</td>
<td>&#x5141;&#x8BB8;&#x60A8;&#x5C06;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x6807;&#x51C6;&#x7528;&#x6237;&#x754C;&#x9762;&#x5143;&#x7D20;&#x7684;&#x5916;&#x89C2;</td>
</tr>
<tr>
<td>box-sizing</td>
<td>&#x5141;&#x8BB8;&#x60A8;&#x4EE5;&#x786E;&#x5207;&#x7684;&#x65B9;&#x5F0F;&#x5B9A;&#x4E49;&#x9002;&#x5E94;&#x67D0;&#x4E2A;&#x533A;&#x57DF;&#x7684;&#x5177;&#x4F53;&#x5185;&#x5BB9;&#x3002;</td>
</tr>
<tr>
<td>icon</td>
<td>&#x4E3A;&#x521B;&#x4F5C;&#x8005;&#x63D0;&#x4F9B;&#x4F7F;&#x7528;&#x56FE;&#x6807;&#x5316;&#x7B49;&#x4EF7;&#x7269;&#x6765;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x6837;&#x5F0F;&#x7684;&#x80FD;&#x529B;&#x3002;</td>
</tr>
<tr>
<td>nav-down</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F7F;&#x7528; arrow-down &#x5BFC;&#x822A;&#x952E;&#x65F6;&#x5411;&#x4F55;&#x5904;&#x5BFC;&#x822A;&#x3002;</td>
</tr>
<tr>
<td>nav-index</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684; tab &#x952E;&#x63A7;&#x5236;&#x6B21;&#x5E8F;&#x3002;</td>
</tr>
<tr>
<td>nav-left</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F7F;&#x7528; arrow-left &#x5BFC;&#x822A;&#x952E;&#x65F6;&#x5411;&#x4F55;&#x5904;&#x5BFC;&#x822A;&#x3002;</td>
</tr>
<tr>
<td>nav-right</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F7F;&#x7528; arrow-right &#x5BFC;&#x822A;&#x952E;&#x65F6;&#x5411;&#x4F55;&#x5904;&#x5BFC;&#x822A;&#x3002;</td>
</tr>
<tr>
<td>nav-up</td>
<td>&#x89C4;&#x5B9A;&#x5728;&#x4F7F;&#x7528; arrow-up &#x5BFC;&#x822A;&#x952E;&#x65F6;&#x5411;&#x4F55;&#x5904;&#x5BFC;&#x822A;&#x3002;</td>
</tr>
<tr>
<td>outline-offset</td>
<td>&#x5BF9;&#x8F6E;&#x5ED3;&#x8FDB;&#x884C;&#x504F;&#x79FB;&#xFF0C;&#x5E76;&#x5728;&#x8D85;&#x51FA;&#x8FB9;&#x6846;&#x8FB9;&#x7F18;&#x7684;&#x4F4D;&#x7F6E;&#x7ED8;&#x5236;&#x8F6E;&#x5ED3;&#x3002;</td>
</tr>
<tr>
<td>resize</td>
<td>&#x89C4;&#x5B9A;&#x662F;&#x5426;&#x53EF;&#x7531;&#x7528;&#x6237;&#x5BF9;&#x5143;&#x7D20;&#x7684;&#x5C3A;&#x5BF8;&#x8FDB;&#x884C;&#x8C03;&#x6574;&#x3002;</td>
</tr>
</tbody>
</table>
<h2 id="css-&#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;"><a name="css-&#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#css-&#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.30. css &#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;</h2>
<p>&#x4EE5;&#x4E0B;&#x5185;&#x5BB9;&#x662F;&#x975E;&#x6807;&#x51C6;&#x7684;&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#xFF0C;&#x5404;&#x5BB6;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;&#x6548;&#x679C;&#x53EF;&#x80FD;&#x4F1A;&#x4E0D;&#x4E00;&#x6837;&#x3002;
&#x6709;&#x4E9B;&#x662F;&#x6BD4;&#x8F83;&#x65B0;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x7B14;&#x8BB0;&#x6BD4;&#x8F83;&#x96F6;&#x661F;&#x548C;&#x51CC;&#x4E71;&#x3002;</p>
<pre><code class="lang-xml">-moz-
&#x4EE3;&#x8868;FireFox&#x6D4F;&#x89C8;&#x5668;&#x79C1;&#x6709;&#x5C5E;&#x6027;

-ms-
&#x4EE3;&#x8868;IE&#x6D4F;&#x89C8;&#x5668;&#x79C1;&#x6709;&#x5C5E;&#x6027;

-webkit-
&#x4EE3;&#x8868;safari&#x3001;chrome&#x6D4F;&#x89C8;&#x5668;&#x79C1;&#x6709;&#x5C5E;&#x6027;

-o-
&#x4EE3;&#x8868;opera&#x6D4F;&#x89C8;&#x5668;&#x79C1;&#x6709;&#x5C5E;&#x6027;
</code></pre>
<pre><code class="lang-xml">// &#x5BF9;&#x5B57;&#x4F53;&#x7684;&#x952F;&#x9F7F;&#x8FDB;&#x884C;&#x8C03;&#x6574; &#x3002;  inherit&#x3001;grayscale&#x3001;antialiased
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

// &#x544A;&#x8BC9;&#x6E32;&#x67D3;&#x5F15;&#x64CE;&#x5DE5;&#x4F5C;&#x65F6;&#x5982;&#x4F55;&#x4F18;&#x5316;&#x663E;&#x793A;&#x6587;&#x672C; , auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
text-rendering: optimizeLegibility;
</code></pre>
<footer class="page-footer"><span class="copyright">&#x65E0;&#x7248;&#x6743; &#x53EF;&#x4EE5;&#x65E0;&#x9650;&#x5236;&#x4F7F;&#x7528;&#xFF01; all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x66F4;&#x65B0;&#x65F6;&#x95F4;&#xFF1A;
2018-10-29 20:49:59
</span></footer>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="js.html" class="navigation navigation-prev " aria-label="Previous page: js">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="JSX.html" class="navigation navigation-next " aria-label="Next page: JSX">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"css","level":"1.3.3","depth":2,"next":{"title":"JSX","level":"1.3.4","depth":2,"path":"chinese/web/JSX.md","ref":"chinese/web/JSX.md","articles":[]},"previous":{"title":"js","level":"1.3.2","depth":2,"path":"chinese/web/js.md","ref":"chinese/web/js.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-search","search-plus","todo","anchor-navigation-ex","copy-code-button","fontsettings","tbfed-pagefooter","donate","local-video","splitter","favicon","theme-comscore","local-video"],"styles":{"website":"styles/website.css"},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"无版权 可以无限制使用！","modify_label":"该文件更新时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"todo":{},"splitter":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"donate":{"alipay":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_支付宝收款码.png","alipayText":"支付宝打赏","button":"打赏","title":"","wechat":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_微信收款码.png","wechatText":"微信打赏"},"fontsettings":{"family":"sans","size":2,"theme":"sepia"},"highlight":{},"anchor-navigation-ex":{"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"mode":"float","multipleH1":true,"pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"printLog":false,"showGoTop":true,"showLevel":true},"favicon":{"shortcut":"assets/images/favicon.ico","bookmark":"assets/images/favicon.ico"},"theme-comscore":{},"local-video":{},"copy-code-button":{},"sharing":{"all":["facebook","google","twitter","weibo","instapaper"],"facebook":true,"google":false,"instapaper":false,"twitter":true,"vk":false,"weibo":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{}},"theme":"default","author":"Aivin","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Aivin开发笔记","language":"zh-hans","gitbook":"*","description":"Aivin开发笔记"},"file":{"path":"chinese/web/css.md","mtime":"2018-10-29T12:49:59.122Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-12T07:42:16.699Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-local-video/video.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-theme-comscore/test.js"></script>
        
    

    </body>
</html>

